<template>
<Row>
  <dtable :columns="columns" :dataAll="dataAll" :dataShow="dataShow" :loading="loading" add edit del op check @refresh="getall()" @show="show" @add="add" @del="del" @edit="edit"></dtable>
  <Modal title="资源信息" v-model="editData" :loading="loading" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="名称" prop="Name">
        <Input v-model="formItem.Name" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="api路径" prop="Url">
        <Input v-model="formItem.Url" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="图标" prop="Logo">
        <Input v-model="formItem.Logo" placeholder="请输入" :icon="formItem.Logo"></Input>
      </Form-item>
      <Form-item label="排序" prop="Seq">
        <Input v-model.number="formItem.Seq" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="类别" prop="Type">
        <Radio-group v-model.number="formItem.Type">
          <Radio label="1">页面目录</Radio>
          <Radio label="0">API功能</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="是否隐藏" prop="Hiden">
            <i-switch v-model="formItem.Hiden" >
                <span slot="open">隐藏</span>
                <span slot="close">不隐藏</span>
            </i-switch>
      </Form-item>
      <Form-item label="父目录" prop="Pid">
        <Select v-model="formItem.Pid" :disabled="isMenu">
            <Option v-for="item  in parentRes" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
          </Select>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
import api from "@/api";
import {
  mapMutations,
  mapGetters,
  mapState
} from "vuex";
import {
  inputString
} from "@/common/utils";
import dtable from "@/components/table/dtable.vue";
export default {
  data() {
    return {
      loading: false,
      columns: [{
          title: "名称",
          key: "Name",
          sortable: true
        },
        {
          title: "类别",
          key: "Tname",
          sortable: true
        },
        {
          title: "父路径",
          key: "Pname",
          sortable: true
        },
        {
          title: "ApiUrl",
          key: "Url",
          sortable: true
        },
        {
          title: "Logo",
          key: "Logo",
          render: (h, params) => {
            return h("Icon", {
              props: {
                type: params.row.Logo
              }
            });
          }
        }
      ],
      dataShow: true, //是否显示表格数据查看表单
      dataAll: [],
      spinShow: false,
      editData: false,
      addid: 0,
      formItem: {
        Name: "",
        Url: "",
        Logo: "plus",
        Hiden: false,
        Type: 0,
        Seq: 100,
        Pid: "0",
        Remark: ""
      },
      ruleValidate: {
        Name: [{
          required: true,
          message: "名称不能为空",
          trigger: "blur"
        }],
        Url: [{
          required: true,
          message: "路径不能为空",
          trigger: "blur"
        }],
        Logo: [{
          required: true,
          message: "logo不能为空",
          trigger: "change"
        }]
      }
    };
  },
  components: {
    dtable
  },
  computed: {
    ...mapState(["isLogin", "captchaUrl", "cptId", "msg"]),
    filiterTableDate() {
      let e = this.dataAll.slice();
      let keys = this.searchKey;
      let filterData = function(element) {
        if (keys === "") {
          return true;
        }
        for (let o in element) {
          if (String(element[o]).indexOf(keys) >= 0) {
            return true;
          }
        }
        return false;
      };
      let fdata = e.filter(filterData);
      this.total = fdata.length;
      return fdata;
    },
    curTableData() {
      let from = this.pageSize * (this.current - 1);
      let to = from + this.pageSize;
      return this.filiterTableDate.slice(from, to);
    },
    //      父资源
    parentRes() {
      let pr = [];
      pr.push({
        Id: "0",
        Name: "根目录"
      });
      for (let e in this.dataAll) {
        if (this.dataAll[e].Type === 1) {
          pr.push({
            Name: this.dataAll[e].Name,
            Id: this.dataAll[e].Id
          });
        }
      }
      // console.log(pr)
      return pr;
    },
    isMenu() {
      if (Number(this.formItem.Type) === 1) {
        return false;
      } else {
        return true;
      }
    }
  },
  watch: {},
  methods: {
    getall() {
      this.loading = true;
      this.$api.getResource().then(res => {
        if (!res.error) {
          this.dataAll = res.Data;
          this.total = res.Data.length;
        } else {
          this.$Message.error(res.message);
        }
        this.loading = false;
      });
    },
    show(row) {
      this.showItem = row;
      this.showData = true;
    },
    edit(index) {
      console.log(index);
      this.addid = 0;
      this.formItem = index;
      this.editData = true;
    },
    add() {
      this.addid = 1;
      this.$refs["editForm"].resetFields();
      this.editData = true;
    },
    asyncOK() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.addid === 0) {
            this.$api.updateResource(this.formItem).then(res => {
              if (!res.error) {
                this.getall();
                this.$Message.success(res.message);
              } else {
                this.$Message.error(res.message, 4);
              }
            });
          } else if (this.addid === 1) {
            this.$api.addResource(this.formItem).then(res => {
              if (!res.error) {
                this.getall();
                this.$Message.success(res.message);
              } else {
                this.$Message.error(res.message, 4);
              }
            });
          }
          setTimeout(() => {
            this.editData = false;
          }, 500);
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    asyncCancel() {
      this.getall();
    },
    del(row) {
      console.log(row);
      this.$api.deleteResource(row).then(res => {
        if (!res.error) {
          this.getall();
          this.$Message.success(res.message);
        } else {
          this.$Message.error(res.data.message, 4);
        }
      });
    }
  },
  mounted() {
    this.getall();
  }
};
</script>


